<template>
	<!-- 顶部 -->
	<view class="category-header">
		<view class="choseType">
			<view class="typeItem activeTypeItem">
				<text>分类</text>
			</view>
			<view class="typeItem">
				<text>食材</text>
			</view>
		</view>
	</view>
	<view>
		<view class="category-left-container">
			
	
			<!-- 左侧大分类 -->
			<scroll-view class="left-scroll" :scroll-y="true">
				<view v-for="(item,index) in categoryData" :key="item._id" @click="letfScrollClick(index)"
					:class=" index == choseLeftIndex?'activeLeftItem left-item flex-ct':'left-item flex-ct'">
					<text>{{item.cat_name}}</text>
				</view>
			</scroll-view>
			<!-- 右侧小分类 -->
			<scroll-view class="right-scroll" :scroll-y="true" :scroll-into-view="choseRightTitel"
				:scroll-with-animation="true" @scroll="onRightScroll">
				
				<view class="right-item" v-for="(item,index) in categoryData" :key="item._id">
					<view class="right-title" :id="`rightTitle${index}`"> {{item.cat_name}}</view>
					<template class="productInfo">
						<view class="right-category-container" v-for="productItem in item.children"
							:key="productItem.cat_id">
							<image :src="productItem.cat_icon"></image>
							<text>{{productItem.cat_name}}</text>
						</view>
					</template>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		getCategoryApi
	} from '../../api/category';
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const categoryData = ref([]);
	const choseType = ref('');
	onLoad(() => {
		getCategoryData();
	})

	// 左侧选中的index
	const choseLeftIndex = ref(0);
	// 当前选中的右侧滚动条的目标元素的id
	const choseRightTitel = ref('rightTitle0');


	function getCategoryData() {
		getCategoryApi().then(res => {
			if (res.code == 200) {
				categoryData.value = res.data;
			}
		})
	};

	function letfScrollClick(index) {
		console.log(choseLeftIndex.value,choseRightTitel.value);
		choseLeftIndex.value = index;
		choseRightTitel.value = 'rightTitle' + index;
		console.log(choseLeftIndex.value,choseRightTitel.value);
	}

	function onRightScroll(event) {
		//滚动条距离顶部的位移（滚动列表的偏移量）
		const scrollTop = event.detail.scrollTop;
		//创建节点查询器
		const query = uni.createSelectorQuery();
		//通过查询器获取节点信息
		query.selectAll('.right-item').boundingClientRect((nodes) => {
			let min = 0;
			let max = 0;
			nodes.forEach((item, index) => {
				min = max; // 上一轮的最大值，赋值给这一轮的最小值
				max += item.height;
				if (scrollTop+1 >= min && scrollTop < max) {
					choseLeftIndex.value = index;
					choseRightTitel.value = '';
				}
			})
		}).exec();
	}
	
</script>

<style scoped lang="scss">
	.category-header {
		height: 150rpx;
		background-color: #EE8131;
		padding-top: 20rpx;
	}

	.choseType {
		margin: 0 auto;
		display: flex;
		width: 378rpx;
		height: 48rpx;
		background-color: #ef7d2b;
		border-radius: 28rpx;
		border: solid 2rpx #ffffff;
		overflow: hidden;

		.typeItem {
			text-align: center;
			line-height: 48rpx;
			flex-shrink: 0;
			width: 192rpx;
			height: 48rpx;
			background-color: #EE8131;
			color: #ffffff;
			border-radius: 28rpx;
		}

		.activeTypeItem {
			color: #EE8131;
			background-color: #ffffff;
		}
	}

	.category-left-container {
		display: flex;
	}

	.right-scroll,
	.left-scroll {
		// 小程序端100vh不包含顶部导航栏的高度
		/* #ifndef WEB */
		height: calc(100vh - 170rpx);
		// 小程序端100vh包含顶部导航栏的高度和手机顶部安全高度（显示电量...信息的高度）
		/* #endif */
		
		/* #ifdef WEB */
		height: calc(100vh - 170rpx - 44px - env(safe-area-inset-top));
		/* #endif */
		color: #767676;
	}

	.left-scroll {
		width: 180rpx;
		flex-shrink: 0;
		.left-item {
			width: 180rpx;
			height: 130rpx;
			font-size: 22rpx;

			text {
				text-align: center;
				width: 100%;
			}
		}

		.right-item {
			font-size: 24rpx;

		}

		.activeLeftItem {
			background-color: #f6f6f6;
			color: #EE8131;
		}

		.activeLeftItem::after {
			content: '';
			display: inline-block;
			width: 2px;
			height: 22rpx;
			background-color: #EE8131;
		}
	}

	.right-title {
		margin: 22rpx;
	}

	.right-category-container {
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.productInfo {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 10rpx 0;
		font-size: 18rpx;
	}

	body ::-webkit-scrollbar {
		display: none;
	}
</style>